<template>
    <div>
    <MainNavBar>
      <template #center-name> 邮寄地址 </template>
    </MainNavBar>
        <div class="content_C">
      <div class="content">
        <div class="top">
          <div class="top_l">
            <div class="circular"></div>
            <div class="line"></div>
          </div>
          <div class="top_r">收货人地址信息</div>
        </div>
        <div class="userinfo yxk">
            <!-- 收货人姓名 -->
            <div>
                <div class="tips">收货人姓名</div>
                <div>
                    <van-field
                    v-model="name"
                    placeholder="请填写运动员姓名"
                    class="ipt"
                    />
                </div>
            </div>
        <!-- 收货人电话号码 -->
            <div>
                <div class="tips">电话号码</div>
                <div>
                    <van-field
                     type="number"
                    v-model="phone"
                    placeholder="请填写收货人电话号码"
                    class="ipt"
                    />
                </div>
            </div>
            <!-- 收货人所在地区 -->
            <div>
                <div class="tips">所在地区</div>
                <div class="ipt" @click="showAddress = true">
                   <span :style="address!='选择省\\市\\区'? 'color:#0a2463;font-size: 4.8vw;font-weight:600':'font-weight: 400;'">{{address}}</span>
                </div>
            </div>
            <!-- 收货人电话号码 -->
            <div>
                <div class="tips">详细地址</div>
                <div>
                    <van-field
                    type="textarea"
      
                    v-model="addressinfo"
                    placeholder="请填写收货人详细地址"
                    class="ipt"
                    />
                </div>
            </div>
            
        </div>
        <div class="bot" @click="upAddress">
            <button>提交</button>
        </div>
      </div>
    </div>
     <!-- 选择地址 -->
  <van-popup v-model:show="showAddress" round position="bottom"
    ><van-area
      title="请选择地址"
      :area-list="areaList"
      @cancel="onCancel"
      @confirm="addressConfirm"
  /></van-popup>
    </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { areaList } from "@vant/area-data";
import { Toast } from 'vant';
import {request} from "@/network/request.js"
    export default {
        data(){
            return{
                name:'',
                addressinfo:'',//详细地址
                phone:'',
                address:'选择省\\市\\区',
                showAddress:false,
                areaList,
                addressCode:''
            }
        },
        methods:{
          onCancel(){
            this.showAddress = false;
          },
            addressConfirm(value){
                this.address =value[0].name+value[1].name + value[2].name 
                this.addressCode = value[2].code
                this.showAddress = false
            // this.address = value
            },
            isValid(){
              if(!this.name){
                Toast.fail('请填写收货人姓名');
                return false;
              }
              if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
                Toast.fail('请填写正确的电话号码');
                return false;
              }
              if(this.address === "选择省\\市\\区"){
                Toast.fail('请选择收货人所在地区');
                return false;
              }
              if(!this.addressinfo){
                Toast.fail('请填写收货人详细地址');
                return false;
              }
              return true;
            },
           async upAddress (){
              if(!this.isValid())return;
              try {
                const res = await request({
                url:"v1/ucenter/shipping_address",
                data:{
                  sign_id:this.$route.query.sign_id,
                  shipping_name:this.name,
                  shipping_mobile:this.phone,
                  shipping_address:this.address + this.addressinfo,
                }
              })
              if(res.code === 2000){
                let count = 0;
                Toast.success({
                  message:res.msg,
                  forbidClick:true,
                })
               let timer =  setInterval(() => {
                  if(count<2)count++;
                  else {
                    this.$router.go(-1);
                    clearInterval(timer)
                  }
                }, 501);
              }else{
                Toast.fail(res.msg)
              }
              } catch (error) {
                Toast("网络错误 请稍后再试")
              }

            }
        },
        components:{
            MainNavBar
        }
    }
</script>

<style lang="less" scoped>
.content {
  width: 88vw;
  margin: 0 auto;
  margin-top: 8vw;
  padding-bottom: 8vw;
  .top {
    display: flex;
    width: 85%;
    margin: 0 auto;
    .top_l {
      width: 8.533vw;
      margin-left: 2.667vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 2.133vw;
      .circular {
        width: 3.2vw;
        height: 3.2vw;
        border: solid 0.533vw #fff;
        border-radius: 2.133vw;
      }
      .line {
        height: 5.6vw;
        width: 0.533vw;
        background-color: #fff;
      }
    }
    .top_r {
      color: rgba(255, 255, 255, 1);
      font-size: 4.8vw;
      //   font-weight: 600;
      letter-spacing: 0.267vw;
      font-family: PingFangSC-Regular;
      line-height: 8.533vw;
    }
  }
 .userinfo{
    //  height: 106.667vw;
     background-color: #fff;
     border-radius: 5.333vw;
     padding: 0 5.333vw 0 5.333vw;
     padding-bottom: 6.667vw;
     .tips {
      font-size: 4.8vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 6.667vw;
      margin-bottom: 2.133vw;
      padding-top: 5.867vw;
      &::before {
        content: "*";
        font-size: 3.733vw;
        font-weight: 700;
        color: #ffb730;
        transform: scale(2);
        margin-right: 3.467vw;
      }
    }
     .ipt{
        width: 100%;
        border-radius: 3.2vw;
        border: 0.267vw solid #e7eaf0;
        font-size: 4.8vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
         color: #ced3e0;
        span{
            display: block;
            height: 12.267vw;
           line-height:12.267vw;
            padding-left:  4.267vw;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        } 
 }
  .bot {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-top: 5.333vw;
    font-size: 4.8vw;
    color: rgba(255, 255, 255, 1);
    font-family: PingFangSC-Regular;
    line-height: 6.667vw;
   button{
    width: 100%;
    height: 12vw;
    line-height: 12vw;
    text-align: center;
    border-radius: 5.333vw;
    background-color: #fff;
    color:#0a2463;
    font-weight: 600;
    border: none;
    }
  }
}
</style>